<template>
  <el-form ref="form" :model="form" :rules="rules" label-width="80px">
    <el-row>
      <el-col :span="12">
        <el-form-item label="任务名称" prop="taskName">
          <el-input v-model="form.taskName" placeholder="请输入任务名称" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="优先级" prop="priority">
          <el-select v-model="form.priority" placeholder="请选择优先级">
            <el-option label="低" :value="0"></el-option>
            <el-option label="中" :value="1"></el-option>
            <el-option label="高" :value="2"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
    
    <el-row>
      <el-col :span="12">
        <el-form-item label="负责人" prop="assigneeName">
          <el-input v-model="form.assigneeName" placeholder="请输入负责人姓名" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="截止时间" prop="dueDate">
          <el-date-picker
            v-model="form.dueDate"
            type="datetime"
            placeholder="选择截止时间"
            value-format="yyyy-MM-dd HH:mm:ss"
            style="width: 100%"
          >
          </el-date-picker>
        </el-form-item>
      </el-col>
    </el-row>
    
    <el-form-item label="任务描述" prop="description">
      <el-input v-model="form.description" type="textarea" placeholder="请输入任务描述" :rows="3" />
    </el-form-item>
    
    <el-form-item label="备注" prop="remark">
      <el-input v-model="form.remark" type="textarea" placeholder="请输入备注" :rows="2" />
    </el-form-item>

    <!-- 子任务列表 -->
    <el-form-item label="子任务">
      <div style="border: 1px solid #dcdfe6; padding: 10px; border-radius: 4px;">
        <div style="margin-bottom: 10px;">
          <el-button type="primary" size="small" @click="addSubTask">添加子任务</el-button>
        </div>
        
        <el-table :data="form.subTaskList" style="width: 100%" v-if="form.subTaskList.length > 0">
          <el-table-column label="子任务名称" width="200">
            <template slot-scope="scope">
              <el-input v-model="scope.row.subTaskName" placeholder="请输入子任务名称" size="small" />
            </template>
          </el-table-column>
          <el-table-column label="描述">
            <template slot-scope="scope">
              <el-input v-model="scope.row.description" placeholder="请输入描述" size="small" />
            </template>
          </el-table-column>
          <el-table-column label="负责人" width="150">
            <template slot-scope="scope">
              <el-input v-model="scope.row.assigneeName" placeholder="请输入负责人" size="small" />
            </template>
          </el-table-column>
          <el-table-column label="操作" width="80">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="removeSubTask(scope.$index)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        
        <el-empty v-else description="暂无子任务" :image-size="60"></el-empty>
      </div>
    </el-form-item>

    <div slot="footer" class="dialog-footer" style="text-align: right; margin-top: 20px;">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="$emit('cancel')">取 消</el-button>
    </div>
  </el-form>
</template>

<script>
export default {
  name: "TaskForm",
  props: {
    form: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      // 表单校验
      rules: {
        taskName: [
          { required: true, message: "任务名称不能为空", trigger: "blur" }
        ],
        priority: [
          { required: true, message: "优先级不能为空", trigger: "change" }
        ],
        assigneeName: [
          { required: true, message: "负责人不能为空", trigger: "blur" }
        ]
      }
    }
  },
  methods: {
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          // 验证子任务
          let subTaskValid = true
          for (let i = 0; i < this.form.subTaskList.length; i++) {
            const subTask = this.form.subTaskList[i]
            if (!subTask.subTaskName || !subTask.assigneeName) {
              this.$modal.msgError(`第${i + 1}个子任务的名称和负责人不能为空`)
              subTaskValid = false
              break
            }
          }
          
          if (subTaskValid) {
            this.$emit('submit')
          }
        }
      })
    },
    
    /** 添加子任务 */
    addSubTask() {
      this.form.subTaskList.push({
        subTaskName: '',
        description: '',
        assigneeName: '',
        status: 0
      })
    },
    
    /** 删除子任务 */
    removeSubTask(index) {
      this.form.subTaskList.splice(index, 1)
    }
  }
}
</script>

<style scoped>
.el-table {
  margin-top: 10px;
}
</style>